<template>
	<view class="img" :style="getStyle"></view>
</template>

<script>
export default {
	props: {
		imgUrl: {
			type: String,
			default: ''
		}
	},
	computed: {
		getStyle() {
			return {
				backgroundImage: `url(${this.imgUrl})`
			};
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped="">
.img {
	position: relative;
	width: 50px;
	height: 70px;
	border-radius: 6px;
	z-index: 10;
	background-size: 100% 100%;
	&:active{
		transform: scale(1.05);
	}
	&::before {
		z-index: 10;
		content: '';
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background-size: 100% 100%;
		background: inherit;
	}
	&::after {
		z-index: 9;
		border-radius: 6px;
		content: '';
		position: absolute;
		top: 1%;
		left: 0%;
		width: 100%;
		height: 100%;
		transform: scale(1);
		filter: blur(10upx) brightness(80%) opacity(0.9);
		background-size: 100% 100%;
		background: inherit;
	}
}
</style>
